<style>
.swiper-container {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 10px;
}
.swiper-wrapper {
	width: 100%;
	height: 150px;
}
.swiper-slide {
	background-position: center;
	background-size: cover;      
	width: 80%;
	height: 150px;
}
/* .swiper-slide img {
	max-height: 150px;	
	height: expression_r(this.height>150? "150px": this.height);
	max-width: 299px;
	width: 100%;
	width: expression_r(this.width>299? "299px": this.width);
	overflow: hidden;
} */
</style>
<div ng-controller="ActivateCardCtrl" seo-directive title="北京银行信用卡" keywords="信用卡开卡" description="北京银行信用卡开卡">
	<div v-page v-transition="CardRelative" title="我要办卡" actionname="activateCard">
		<form name="formpre" novalidate ng-init="init()">
			<!-- 排队显示的卡片图样 -->	
			<div class="swiper-container">					
				<div class="swiper-wrapper">
					<!--
					<div class="swiper-slide">
						<img src={{cardQuery[i].url}}/>
					</div> 
					-->													
				</div>							
			</div>
			<!-- 卡片名称和卡片介绍 -->
			<div style="text-align: center; font-size: 20px; margin-top: 30px;">
				<b>{{carditem.cardname}}</b>
			</div>
			<div style="margin: 0 auto; width: 12em; margin-top: 8px;">
				<div style="text-align: left;" ng-bind-html="carditem.carddesc"></div>
			</div>
			<!-- 立即申请按钮 -->
			<div class="container-fluid">
				<div class="row mbottom80"></div>			     		    		
				<div class="row buttonPart">					
					<div class="col-xs-12 text-center">
						<button type="button" class="btn-red2" onclick="openApp('')">立即申请</button>
					</div>
				</div>			
		   </div>
		</form>
	</div>
</div>
<script src="ApplyCard/controllers/activateCardController.js" type="text/javascript"></script>
<script>
var width = document.body.clientWidth; //可见区域宽度
var swiper = new Swiper('.swiper-container', { //实例化swiper
    effect: 'coverflow',
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 'auto',
	initialSlide: 0,
    coverflow: {
        rotate: 0,
        stretch: width*30/100,
        depth: 300,
        modifier: 1,
        slideShadows : false
    } 
});
function isH(direction) { //判断可滑动slider是否为垂直方向
    return direction === 'horizontal';
}
swiper.effects.coverflow.setTranslate = function () { //覆盖swiper的setTranslate方法
    var s = swiper;   
    var transform = s.translate;
    var center = isH(s.params.direction) ? -transform + s.width / 2 : -transform + s.height / 2;
    var rotate = isH(s.params.direction) ? s.params.coverflow.rotate: -s.params.coverflow.rotate;
    var translate = s.params.coverflow.depth;  

    //Each slide offset from center
    for (var i = 0, length = s.slides.length; i < length; i++) {
        var opacity = 1;
        var slide = s.slides.eq(i);
        var slideSize = s.slidesSizesGrid[i];
        var slideOffset = slide[0].swiperSlideOffset;
        var offsetMultiplier = (center - slideOffset - slideSize / 2) / slideSize * s.params.coverflow.modifier;
        
       	//设置slider的透明度
        if(offsetMultiplier >= 0 && offsetMultiplier < 1) {
            opacity = 1 - offsetMultiplier; //滑动中中间轴右边第一个透明度由1变为0
        } else if(offsetMultiplier >= 1) {
            opacity = 0; //滑动中中间轴右边除了第一个其他透明度为零
        } else {
            opacity = 1; //滑动中中间轴左边的透明度全为1
        } 
        slide.css("opacity", opacity);
		
        var rotateY = isH(s.params.direction) ? rotate * offsetMultiplier : 0;
        var rotateX = isH(s.params.direction) ? 0 : rotate * offsetMultiplier;
        // var rotateZ = 0
        var translateZ = translate * offsetMultiplier;
        
      	var translateY = isH(s.params.direction) ? 0 : s.params.coverflow.stretch * (offsetMultiplier);
        var translateX = isH(s.params.direction) ? s.params.coverflow.stretch * (offsetMultiplier) : 0;
    
        //Fix for ultra small values
        if (Math.abs(translateX) < 0.001) translateX = 0;
        if (Math.abs(translateY) < 0.001) translateY = 0;
        if (Math.abs(translateZ) < 0.001) translateZ = 0;
        if (Math.abs(rotateY) < 0.001) rotateY = 0;
        if (Math.abs(rotateX) < 0.001) rotateX = 0;
    
        var slideTransform = 'translate3d(' + translateX + 'px,' + translateY + 'px,' + translateZ + 'px)  rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)';
    
        slide.transform(slideTransform);
        slide[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
        if (s.params.coverflow.slideShadows) {
            //Set shadows
            var shadowBefore = isH(s.params.direction) ? slide.find('.swiper-slide-shadow-left') : slide.find('.swiper-slide-shadow-top');
            var shadowAfter = isH(s.params.direction) ? slide.find('.swiper-slide-shadow-right') : slide.find('.swiper-slide-shadow-bottom');
            if (shadowBefore.length === 0) {
                shadowBefore = $('<div class="swiper-slide-shadow-' + (isH(s.params.direction) ? 'left' : 'top') + '"></div>');
                slide.append(shadowBefore);
            }
            if (shadowAfter.length === 0) {
                shadowAfter = $('<div class="swiper-slide-shadow-' + (isH(s.params.direction) ? 'right' : 'bottom') + '"></div>');
                slide.append(shadowAfter);
            }
            if (shadowBefore.length) shadowBefore[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
            if (shadowAfter.length) shadowAfter[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
        }
    }   
};
</script>